<template>
  <div class="search-box">
    <div class="flex">
      <div style="color: black">
        <el-icon> <Search /> </el-icon><span>筛选搜索</span>
      </div>
      <div>
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="submitFn" type="primary">查询搜索</el-button>
      </div>
    </div>
    <div style="padding-top: 20px">
      <el-form
        @submit.prevent="submitFn"
        ref="searchFormRef"
        :model="listParams"
      >
        <div class="fi">
          <el-form-item prop="keyword" label="输入搜索:" label-width="120px">
            <el-input
              v-model="listParams.keyword"
              placeholder="商品名称"
            ></el-input>
          </el-form-item>
          <el-form-item prop="keyword" label="商品货号:" label-width="120px">
            <el-input
              v-model="listParams.keyword"
              placeholder="商品货号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="keyword" label="商品分类:" label-width="120px">
            <el-cascader
              v-model="CategoryValue"
              :options="catoptions"
              @change="handleChange"
              :props="props"
            />
          </el-form-item>
          <el-form-item prop="keyword" label="商品品牌:" label-width="120px">
            <el-select v-model="brandValue" class="m-2" placeholder="Select">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="keyword" label="上架状态:" label-width="120px">
            <el-select v-model="goUpValue" class="m-2" placeholder="Select">
              <el-option
                v-for="item in arr"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="keyword" label="审核状态:" label-width="120px">
            <el-select v-model="okValue" class="m-2" placeholder="Select">
              <el-option
                v-for="item in arr2"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
  <el-table :data="tableData" border>
    <el-table-column width="50px" type="selection"></el-table-column>
    <el-table-column prop="id" label="编号"></el-table-column>
    <el-table-column prop="name" label="商品图片"></el-table-column>
    <el-table-column label="商品名称"></el-table-column>
    <el-table-column label="价格/货号"></el-table-column>
    <el-table-column label="标签"></el-table-column>
    <el-table-column prop="sort" label="排序"></el-table-column>
    <el-table-column label="SKU库存"></el-table-column>
    <el-table-column prop="sale" label="销量"></el-table-column>
    <el-table-column label="审核状态"></el-table-column>
    <el-table-column label="操作"></el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { user } from "@/api";
import { reactive, ref, toRefs } from "vue";

interface IState {
  options: IGoodBrand[];
  catoptions: IGoodsDataWithChildren[];
  tableData: IProductListResponse[];
  listParams: user;
  total: number;
  totalPage: number;
}

const state = reactive<IState>({
  options: [],
  catoptions: [],
  tableData: [],
  listParams: {
    keyword: "",
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  totalPage: 0,
});
const props = {
  value: "id",
  label: "name",
  children: "children",
};
const arr = ["上架", "下架"];
const arr2 = ["审核通过", "未通过"];
const { listParams, tableData, total, totalPage, catoptions, options } =
  toRefs(state);

const brandValue = ref("");
const goUpValue = ref("");
const CategoryValue = ref("");
const okValue = ref("");

const searchFormRef = ref();
const resetForm = () => {
  searchFormRef.value?.resetFields();
};
const submitFn = () => {};
const handleChange = () => {};
user.categoryChildrenApi().then((res) => {
  catoptions.value = res.data;
});
user.brandListApi(listParams.value).then((res) => {
  options.value = res.data.list;
});
user.getAllGoodsListApi({ pageNum: 1, pageSize: 5 }).then((res) => {
  tableData.value = res.data.list;
});
</script>
<style lang="less" scoped>
/deep/.cell {
  text-align: center;
}

/deep/.el-table_1_column_1 {
  text-align: center;
}
.el-input {
  width: 200px;
}
.search-box {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-bottom: 30px;

  .flex {
    display: flex;
    justify-content: space-between;
  }
}
.fi {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
</style>
